<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>新年贺卡</title>
    <link rel="shortcut icon"type="image/x-icon" href="favicon.ico/" />
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	 }
    	html,body{
    		width: 100%;
    		height: 100%;
    	}
    	#background{
    		
    		width: 100%;
    		height: 100%;
    		background-image: url(timg_0020.png);
    		background-size: 100% 100%;
    	}
		 #a5{
            width:500px;
            height:50px;
            position:absolute;
            animation:my5 18s;
            -webkit-animation:my5 18s;
            animation-fill-mode: forwards;
        }
        @-webkit-keyframes my5 
        {
            0%   { left:0%; bottom:0%;}
            100% { left:0%; bottom:90%;}
        }
    	.shan{
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		width:100%;
    		height: 35%;
    		background: url(timg_0018.png);
    		background-size: 100% 100%;
    		
    		background-repeat: no-repeat;
    	}
    	.yuanquan{
    		position:absolute;
    		left: 20%;
    		top: 8%;
    		width:59%;
    		height: 39%;
    		background: url(timg_0005.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    		animation: ha 3s linear infinite alternate;
    		-webkit-animation: ha 3s linear infinite;
    	}
    	@-webkit-keyframes ha{
    		from{transform: rotate(0deg);}
    		to{transform: rotate(360deg);}
    	}
    	@keyframes ha{
    		from{transform: rotate(0deg);}
    		to{transform: rotate(360deg);}
    	}
    	.zi1{
    		position:absolute;
    		left: 26%;
    		top: 60%;
    	
    		width:10.5%;
    		height: 5%;
    		background: url(timg_0013.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi2{
    		position:absolute;
    		left: 38%;
    		top: 59.7%;
    	
    		width:10.3%;
    		height: 3.5%;
    		background: url(timg_0006.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi3{
    		position:absolute;
    		left: 53%;
    		top: 59.5%;
    	
    		width:10.5%;
    		height:3.8%;
    		background: url(timg_0007.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi4{
    		position:absolute;
    		left: 65%;
    		top: 59.5%;
    	
    		width:10.5%;
    		height: 3.8%;
    		background: url(timg_0008.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi5{
    		position:absolute;
    		left: 26%;
    		top: 66.6%;
    	
    		width:22.5%;
    		height: 4.5%;
    		background: url(timg_0014.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi6{
    		position:absolute;
    		left: 53%;
    		top: 66.6%;
    	
    		width:5.1%;
    		height: 4.2%;
    		background: url(timg_0017.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi7{
    		position:absolute;
    		left: 59.4%;
    		top: 66.2%;
    	
    		width:16.1%;
    		height: 4.4%;
    		background: url(timg_0016.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.zi8{
    		width: 25.2rem;
			font-family: "微软雅黑";
			font-size: 1.6rem;
			color: dimgray;
			position: relative;
			top: 74vh;
			left: 41vh;
			right: 0;
			margin: auto;
			text-align: left;
    	}
    	.xiahuaxian{
    		position:absolute;
    		left: 58%;
    		top: 77%;
    	}
    	.wenzi1{
    		position:absolute;
    		left: 10%;
    		top: 50%;
    	
    		width:12.7%;
    		height: 3%;
    		background: url(timg_0012.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.wenzi2{
    		position:absolute;
    		left: 20%;
    		top: 55%;
    	
    		width:60%;
    		height: 2%;
    		background: url(timg_0015.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.wenzi3{
    		position:absolute;
    		left: 75%;
    		top: 75%;
    	
    		width:10.5%;
    		height: 3.8%;
    		background: url(timg_0009.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.beijing1{
    		position:absolute;
    		left: 0%;
    		top: 0%;
    	
    		width:24%;
    		height: 45%;
    		background: url(timg_0002.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.beijing2{
    		position:absolute;
    		right: 0%;
    		top: 0%;
    	
    		width:20%;
    		height: 45%;
    		background: url(timg_0001.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.beijing3{
    		position:absolute;
    		right: 20%;
    		top: 0%;
    	
    		width:5%;
    		height: 18%;
    		background: url(timg_0000.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.yu{
    		position:absolute;
    		left: 22%;
    		top: 10%;
    	
    		width:40%;
    		height: 30%;
    		background: url(timg_0004.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
    	.yubian{
    		position:absolute;
    		left: 37%;
    		top: 13%;
    	
    		width:33%;
    		height: 23%;
    		background: url(timg_0003.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}  	
    	#background1{
    		position: absolute;
    		width: 100%;
    		height: 100%;
    		background-image: url(apic17871.png);
    		background-size: 100% 100%;
    		background-repeat: no-repeat;
    	}
        #bdz{
        	display: none;
        }
    </style>
    <script type="text/javascript">
    	
   		//document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   			window.onload = function(){
			var size=document.body.screen/30;
			document.getElementsByTagName("html")[0].style.fontSize = size+"px";
			
    </script>

</head>
<body >
	<div id="bd" class="bd">
		<div id="background">
		<div class="biankuang"></div>
		<div class="shan"></div>
		<div class="yuanquan"></div>
		
		<div class="wenzi1"></div>
		<div class="wenzi2"></div>	
		<div class="wenzi3"></div>
		
		<div class="beijing1"></div>	
		<div class="beijing2"></div>
		<div class="beijing3"></div>

		<div class="zi1"></div>
		<div class="zi2"></div>
		<div class="zi3"></div>
		<div class="zi4"></div>
		<div class="zi5"></div>
		<div class="zi6"></div>
		<div class="zi7"></div>
		<div class="zi8">kruin</div>
		<div class="xiahuaxian">________</div>
		<div class="yu"></div>
		<div class="yubian"></div>
	</div>
	</div>
	
	<div id="bdz" class="bd1">
		<div id="background1">
		<div><p id="a5" style="font-size: 20px;">&nbsp;相知是天意，<br /><br />&nbsp;相识是人意，<br /><br />&nbsp;相加便是友谊，<br /><br />&nbsp;有情便有意，<br /><br />&nbsp;我们能聚在一起，因为
		心有灵犀。<br /><br /><br /><br />&nbsp;思悠悠，情满心头;<br /><br />&nbsp;情柔柔，遥念好友;<br /><br />&nbsp;痛饮两盏淡酒，喜看鸡年露新头，<br /><br />&nbsp;任相思沾染满
		襟袖，让幸福轻握君手<br /><br /></p></div>


	</div>
	</div>
</body>
<script type="text/javascript">
	var db = document.getElementById("bd");
	var bd1=document.getElementById("bdz");
			addEventListener("touchstart",function(){
				db.style.display="none";
				bd1.style.display="block";
			},false);
			
			bd1.addEventListener("touchstart",function(){
				db.style.display="block";
				bd1.style.display="none";
			},false);
</script>
</html>